<script setup lang="ts">
  import { useField } from 'vee-validate'
  import { nextTick, onMounted, reactive, ref, watch } from 'vue'
  import AppInput from '~/components/AppInput.vue'
  import closeEyeIcon from '/images/webp/setting/closes_eye_icon.webp'
  import fundPasswordIcon from '/images/webp/setting/fund_password_icon.webp'
  import loginPasswordIcon from '/images/webp/setting/login_password_icon.webp'
  import openEyeIcon from '/images/webp/setting/open_eye_icon.webp'
  definePageMeta({
    layout: 'header-back',
    title: 'change_password_text'
  })
  const { runMemberLogout, logoutLoading } = useLogout()
  const {
    value: oldPayPassword,
    errorMessage: oldPayPwdErrorMsg,
    validate: valiOldPayPwd,
    resetField: resetOldPayPwd
  } = useField<string>('payPassword', value => {
    if (!payPasswordReg.test(value)) return t('only_6_num')
    return ''
  })
  const {
    value: payPassword,
    errorMessage: payPwdErrorMsg,
    validate: valiPayPwd,
    resetField: resetPayPassword
  } = useField<string>('payPassword', fieldVerifyPayPwd)
  function fieldVerifyPayPwd(value: string) {
    if (!payPasswordReg.test(value)) return t('only_6_num')
    // return t('pls_enter_password')
    // else if (!payPasswordReg.test(value))
    //   return t('tip_safepwd_six')
    else if (aginPayPassword.value) valiAginPayPwd()
    return ''
  }
  const {
    value: aginPayPassword,
    errorMessage: aginPayPwdErrorMsg,
    validate: valiAginPayPwd,
    resetField: resetAginPayPassword
  } = useField<string>('aginPayPassword', value => {
    if (!value) return t('only_6_num')
    // return t('pls_enter_password')
    else if (value !== payPassword.value)
      // return t('validate_msg_safepwd_unequal')
      return t('pwd_2_not_equal')
    return ''
  })
  const {
    value: emailCode,
    errorMessage: emailCodeErrorMsg,
    validate: valiemailCode,
    resetField: resetEmailCode
  } = useField<string>(
    'emailCode',
    value => {
      if (!value) return t('validate_msg_input_code')
      else if (value.length !== 6) return t('your_code_msg')
      return ''
    },
    { initialValue: '' }
  )
  const { bool: isCountdown, setFalse: setCountdownFalse } = useBoolean(false)
  const { start, reset, current } = useCountDown({
    time: 60 * 1000,
    onFinish() {
      setCountdownFalse()
    }
  })
  const { t } = useI18n()
  const router = useRouter()
  const appStore = useAppStore()
  const { userInfo } = storeToRefs(appStore)
  const brandStore = useBrandStore()
  const { isOpenPayPwd } = storeToRefs(brandStore)
  // 登录密码相关
  const oldPassword = ref('')
  const newPassword = ref('')
  const confirmPassword = ref('')

  // 控制保存按钮状态
  const canSaveLoginPassword = ref(false)

  // 监听密码输入框变化
  watch(
    [oldPassword, newPassword, confirmPassword],
    ([old, newPwd, confirm]) => {
      // 所有输入框都有值，且新密码和确认密码一致时，才能点击保存
      canSaveLoginPassword.value = Boolean(old && newPwd && confirm && newPwd === confirm)
    },
    { immediate: true }
  )

  // 资金密码相关
  const oldFundPassword = ref('')
  const newFundPassword = ref('')
  const confirmFundPassword = ref('')
  const verifyCode = ref('')
  // 没有邮箱或手机号
  const isEmailOrPhone = ref(false)
  // 控制资金密码保存按钮状态
  const canSaveFundPassword = ref(false)

  // 监听资金密码输入框变化
  watch(
    [oldFundPassword, newFundPassword, confirmFundPassword, verifyCode],
    ([old, newPwd, confirm, code]) => {
      // 所有输入框都有值，且新密码和确认密码一致时，才能点击保存
      canSaveFundPassword.value = Boolean(old && newPwd && confirm && code && newPwd === confirm)
    },
    { immediate: true }
  )

  // 验证码相关
  const showCountdown = ref(false)
  const countdown = ref(0)
  const codeSent = ref(false)
  let countdownTimer: number | null = null

  // 验证方式：手机或邮箱
  const verifyMethod = ref<'phone' | 'email'>('phone')

  const { run: runMemberPasswordUpdate, loading: passwordUpdateLoading } = useRequest(
    ApiMemberPasswordUpdate,
    {
      onSuccess() {
        message.success(`${t('success_update_pwd')} `)
        // 修改密码成功之后退出登陆
        runMemberLogout()
        setTimeout(() => {
          // Local.clear()
          location.replace('/')
        }, 0)
      }
    }
  )
  console.log('userInfo', userInfo.value)
  // 密码可见性控制
  const passwordVisibility = reactive({
    oldPassword: false,
    newPassword: false,
    confirmPassword: false,
    oldFundPassword: false,
    newFundPassword: false,
    confirmFundPassword: false
  })

  // 验证结果
  const validationResults = reactive({
    oldPassword: { isValid: true, message: '' },
    newPassword: { isValid: true, message: '' },
    confirmPassword: { isValid: true, message: '' },
    oldFundPassword: { isValid: true, message: '' },
    newFundPassword: { isValid: true, message: '' },
    confirmFundPassword: { isValid: true, message: '' },
    verifyCode: { isValid: true, message: '' }
  })

  // 显示隐藏密码
  const togglePasswordVisibility = (field: string) => {
    passwordVisibility[field as keyof typeof passwordVisibility] =
      !passwordVisibility[field as keyof typeof passwordVisibility]
  }

  // 获取密码类型
  const getPasswordType = (field: string) => {
    return passwordVisibility[field as keyof typeof passwordVisibility] ? 'text' : 'password'
  }

  // 保存登录密码
  const saveLoginPassword = () => {
    // 验证密码
    if (!oldPassword.value) {
      validationResults.oldPassword = {
        isValid: false,
        message: t('change_password_enter_old_pwd')
      }
      return
    }

    if (!newPassword.value) {
      validationResults.newPassword = {
        isValid: false,
        message: t('change_password_enter_new_pwd')
      }
      return
    }

    if (newPassword.value !== confirmPassword.value) {
      validationResults.confirmPassword = {
        isValid: false,
        message: t('change_password_pwd_mismatch')
      }
      return
    }
    runMemberPasswordUpdate({
      password: oldPassword.value,
      new_password: newPassword.value
    })
    // 保存登录密码逻辑
    console.log('保存登录密码')
  }
  const { isSetPayPwd, runMemberAuthConfig } = useAuthConfig()

  const { run: runMemberPayPasswordUpdate } = useRequest(
    ApiMemberPayPasswordUpdate,
    {
      onSuccess() {
        message.success(`${t('success_set_safepwd')} `)
        // 资金密码设置成功之后，刷新信息
        reset()
        runMemberAuthConfig()
        resetOldPayPwd()
        resetPayPassword()
        resetAginPayPassword()
        resetEmailCode()
      }
    }
  )
  /** 发送邮箱验证码 */
  const { runAsync: runAsyncMemberSendMailCode } = useRequest(
    ApiMemberSendMailCode,
    {
      onSuccess() {
        reset()
        start()
        isCountdown.value = true
        message.success(`${t('success_send_code')} `)
      }
    }
  )
  /** 发送手机验证码 */
  const { runAsync: runAsyncSendPhoneSms } = useRequest(
    () => ApiMemberPhoneSms({ type: 1, uid: userInfo.value?.uid }),
    {
      onSuccess() {
        reset()
        start()
        isCountdown.value = true
        message.success(`${t('success_send_code')} `)
      }
    }
  )
  // 发送验证码
  const sendVerifyCode = () => {
    if (countdown.value > 0) return
    if (verifyMethod.value === 'phone') runAsyncSendPhoneSms()
    else runAsyncMemberSendMailCode()
    // 发送验证码逻辑
    console.log('发送验证码')

    // 标记验证码已发送
    codeSent.value = true
    // 开始倒计时
    startCountdown()
  }

  // 开始倒计时
  const startCountdown = () => {
    showCountdown.value = true
    countdown.value = 57 // 57秒倒计时
    if (countdownTimer) {
      clearInterval(countdownTimer)
    }
    countdownTimer = window.setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--
      } else {
        if (countdownTimer) {
          clearInterval(countdownTimer)
          countdownTimer = null
          showCountdown.value = false
        }
      }
    }, 1000)
  }

  // 保存资金密码
  const saveFundPassword = () => {
    // 验证资金密码
    if (!oldFundPassword.value) {
      validationResults.oldFundPassword = {
        isValid: false,
        message: t('change_password_enter_old_fund_pwd')
      }
      return
    }

    if (!newFundPassword.value) {
      validationResults.newFundPassword = {
        isValid: false,
        message: t('change_password_enter_new_fund_pwd')
      }
      return
    }

    if (newFundPassword.value !== confirmFundPassword.value) {
      validationResults.confirmFundPassword = {
        isValid: false,
        message: t('change_password_pwd_mismatch')
      }
      return
    }

    if (!verifyCode.value) {
      validationResults.verifyCode = {
        isValid: false,
        message: t('change_password_enter_verify_code')
      }
      return
    }
    runMemberPayPasswordUpdate({
      types: isSetPayPwd.value ? 2 : 1,
      old_pay_password: oldFundPassword.value ? oldFundPassword.value : '',
      pay_password: newFundPassword.value,
      code: verifyCode.value,
      code_type: verifyMethod.value == 'phone' ? 2 : 1
    })
    // 保存资金密码逻辑
    console.log('保存资金密码')
  }
  // 前往绑定
  const goToBind = () => {
    router.push('/setting/contact')
  }
  // 添加提示文本链接
  const contactSupport = () => {
    // 跳转到客服页面或打开客服聊天窗口
    console.log('联系客服')
  }

  // 使用邮箱接收验证码
  const useEmailVerify = () => {
    // 切换到邮箱验证方式
    verifyMethod.value = verifyMethod.value === 'phone' ? 'email' : 'phone'
    // 重置验证码状态
    codeSent.value = false
    showCountdown.value = false
    verifyCode.value = ''
    if (countdownTimer) {
      clearInterval(countdownTimer)
      countdownTimer = null
    }
    countdown.value = 0
  }

  // 修复密码输入组件样式
  const fixPasswordInputStyle = () => {
    // 使用nextTick确保DOM更新后执行
    nextTick(() => {
      const passwordInputs = document.querySelectorAll(
        'input[type="password"]'
      ) as NodeListOf<HTMLInputElement>
      passwordInputs.forEach(input => {
        input.style.fontSize = '12px'
        input.style.paddingRight = '40px'
      })

      const textInputs = document.querySelectorAll(
        'input[type="text"]'
      ) as NodeListOf<HTMLInputElement>
      textInputs.forEach(input => {
        // 排除验证码输入框
        if (!input.classList.contains('code-input')) {
          input.style.paddingRight = '40px'
        }
      })
    })
  }

  // 判断浏览器类型
  const getBrowserInfo = () => {
    const ua = navigator.userAgent
    let browserName = ''

    if (ua.includes('Safari') && !ua.includes('Chrome')) {
      browserName = 'Safari'
    } else if (ua.includes('Chrome')) {
      browserName = 'Chrome'
    } else if (ua.includes('Firefox')) {
      browserName = 'Firefox'
    } else if (ua.includes('MSIE') || ua.includes('Trident/')) {
      browserName = 'IE'
    } else if (ua.includes('Edge')) {
      browserName = 'Edge'
    }

    // 判断是否是移动设备
    const isMobile = /iPhone|iPad|iPod|Android/i.test(ua)

    return {
      browserName,
      isMobile,
      userAgent: ua
    }
  }

  // 在组件挂载时获取浏览器信息
  onMounted(() => {
    fixPasswordInputStyle()
    if (userInfo.value?.phone || userInfo.value?.email) isEmailOrPhone.value = true

    // 获取浏览器信息
    const browserInfo = getBrowserInfo()
    console.log('浏览器信息：', browserInfo)
  })

  // 监听密码可见性变化，重新调整样式
  watch(passwordVisibility, () => {
    fixPasswordInputStyle()
  })
</script>

<template>
  <div class="password-page">
    <div class="password-content">
      <!-- 页面标题 -->
      <div class="page-title">{{ t('change_password_text') }}</div>

      <!-- 登录密码部分 -->
      <div class="section login-password-section">
        <div class="section-item">
          <div class="content">
            <BaseImage
              width="28px"
              style="height: 28px; margin-bottom: 10px"
              :url="loginPasswordIcon"
            />
            <div class="title">{{ t('login_pwd') }}</div>
            <!-- 旧密码 -->
            <div class="label">{{ t('change_password_old') }}</div>
            <div class="input-row">
              <div class="password-input-container">
                <AppInput
                  name="oldPassword"
                  v-model="oldPassword"
                  v-model:validateResult="validationResults.oldPassword"
                  :type="getPasswordType('oldPassword')"
                  :placeholder="t('change_password_enter_old_pwd')"
                >
                  <template #suffix>
                    <div class="eye-icon" @click="togglePasswordVisibility('oldPassword')">
                      <BaseImage
                        width="22px"
                        height="22px"
                        :url="passwordVisibility.oldPassword ? openEyeIcon : closeEyeIcon"
                      />
                    </div>
                  </template>
                </AppInput>
              </div>
              <div v-if="!validationResults.oldPassword.isValid" class="error-message">
                {{ validationResults.oldPassword.message }}
              </div>
            </div>

            <!-- 新密码 -->
            <div class="label">{{ t('change_password_new') }}</div>
            <div class="input-row">
              <div class="password-input-container">
                <AppInput
                  name="newPassword"
                  v-model="newPassword"
                  v-model:validateResult="validationResults.newPassword"
                  :type="getPasswordType('newPassword')"
                  :placeholder="t('change_password_enter_new_pwd')"
                >
                  <template #suffix>
                    <div class="eye-icon" @click="togglePasswordVisibility('newPassword')">
                      <BaseImage
                        width="22px"
                        height="22px"
                        :url="passwordVisibility.newPassword ? openEyeIcon : closeEyeIcon"
                      />
                    </div>
                  </template>
                </AppInput>
              </div>
              <div v-if="!validationResults.newPassword.isValid" class="error-message">
                {{ validationResults.newPassword.message }}
              </div>
            </div>

            <!-- 确认新密码 -->
            <div class="label">{{ t('change_password_confirm') }}</div>
            <div class="input-row">
              <div class="password-input-container">
                <AppInput
                  name="confirmPassword"
                  v-model="confirmPassword"
                  v-model:validateResult="validationResults.confirmPassword"
                  :type="getPasswordType('confirmPassword')"
                  :placeholder="t('change_password_confirm')"
                >
                  <template #suffix>
                    <div class="eye-icon" @click="togglePasswordVisibility('confirmPassword')">
                      <BaseImage
                        width="22px"
                        height="22px"
                        :url="passwordVisibility.confirmPassword ? openEyeIcon : closeEyeIcon"
                      />
                    </div>
                  </template>
                </AppInput>
              </div>
              <div v-if="!validationResults.confirmPassword.isValid" class="error-message">
                {{ validationResults.confirmPassword.message }}
              </div>
            </div>

            <div class="button-row">
              <button
                class="save-btn"
                @click="saveLoginPassword"
                :disabled="!canSaveLoginPassword"
                :class="{ disabled: !canSaveLoginPassword }"
              >
                {{ t('change_password_save') }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 资金密码部分 -->
      <div class="section fund-password-section" v-if="isOpenPayPwd">
        <div class="section-item">
          <div class="content" style="max-width: 100%">
            <BaseImage
              width="28px"
              style="height: 28px; margin-bottom: 10px"
              :url="fundPasswordIcon"
            />
            <div class="title">{{ t('change_password_fund') }}</div>
            <div v-if="isEmailOrPhone">
              <!-- 原资金密码 -->
              <div class="label">{{ t('change_password_fund_old') }}</div>
              <div class="input-row">
                <div class="password-input-container">
                  <AppInput
                    name="oldFundPassword"
                    v-model="oldFundPassword"
                    v-model:validateResult="validationResults.oldFundPassword"
                    :type="getPasswordType('oldFundPassword')"
                    :placeholder="t('change_password_fund_confirm')"
                  >
                    <template #suffix>
                      <div class="eye-icon" @click="togglePasswordVisibility('oldFundPassword')">
                        <BaseImage
                          width="22px"
                          height="22px"
                          :url="passwordVisibility.oldFundPassword ? openEyeIcon : closeEyeIcon"
                        />
                      </div>
                    </template>
                  </AppInput>
                </div>
                <div v-if="!validationResults.oldFundPassword.isValid" class="error-message">
                  {{ validationResults.oldFundPassword.message }}
                </div>
              </div>
              <!-- 新资金密码 -->
              <div class="label">{{ t('change_password_fund_new') }}</div>
              <div class="input-row">
                <div class="password-input-container">
                  <AppInput
                    name="newFundPassword"
                    v-model="newFundPassword"
                    v-model:validateResult="validationResults.newFundPassword"
                    :type="getPasswordType('newFundPassword')"
                    :placeholder="t('change_password_fund')"
                  >
                    <template #suffix>
                      <div class="eye-icon" @click="togglePasswordVisibility('newFundPassword')">
                        <BaseImage
                          width="22px"
                          height="22px"
                          :url="passwordVisibility.newFundPassword ? openEyeIcon : closeEyeIcon"
                        />
                      </div>
                    </template>
                  </AppInput>
                </div>
                <div v-if="!validationResults.newFundPassword.isValid" class="error-message">
                  {{ validationResults.newFundPassword.message }}
                </div>
              </div>
              <!-- 确认资金密码 -->
              <div class="label">{{ t('change_password_fund_confirm') }}</div>
              <div class="input-row">
                <div class="password-input-container">
                  <AppInput
                    name="confirmFundPassword"
                    v-model="confirmFundPassword"
                    v-model:validateResult="validationResults.confirmFundPassword"
                    :type="getPasswordType('confirmFundPassword')"
                    :placeholder="t('change_password_fund_confirm')"
                  >
                    <template #suffix>
                      <div
                        class="eye-icon"
                        @click="togglePasswordVisibility('confirmFundPassword')"
                      >
                        <BaseImage
                          width="22px"
                          height="22px"
                          :url="passwordVisibility.confirmFundPassword ? openEyeIcon : closeEyeIcon"
                        />
                      </div>
                    </template>
                  </AppInput>
                </div>
                <div v-if="!validationResults.confirmFundPassword.isValid" class="error-message">
                  {{ validationResults.confirmFundPassword.message }}
                </div>
              </div>
              <!-- 手机验证码 -->
              <div class="label">
                {{ verifyMethod === 'phone' ? t('phone_code') : t('email_code') }}
              </div>
              <div class="input-row">
                <div class="verify-input-container">
                  <input
                    type="text"
                    v-model="verifyCode"
                    :placeholder="
                      t('please_enter_code') +
                      (verifyMethod === 'phone' ? t('phone_code') : t('email_code'))
                    "
                    maxlength="6"
                    pattern="[0-9]*"
                    inputmode="numeric"
                    class="code-input"
                  />
                  <button
                    :class="[
                      'code-btn',
                      { 'resend-code-btn': codeSent, 'get-code-btn': !codeSent }
                    ]"
                    :disabled="showCountdown"
                    @click="sendVerifyCode"
                  >
                    <template v-if="showCountdown"
                      >{{ countdown }}{{ t('change_password_seconds_resend') }}</template
                    >
                    <template v-else-if="codeSent">{{ t('change_password_resend_code') }}</template>
                    <template v-else> {{ t('change_password_get_code') }} </template>
                  </button>
                </div>
                <div v-if="!validationResults.verifyCode.isValid" class="error-message">
                  {{ validationResults.verifyCode.message }}
                </div>
              </div>

              <div class="button-row">
                <button
                  class="save-btn"
                  @click="saveFundPassword"
                  :disabled="!canSaveFundPassword"
                  :class="{ disabled: !canSaveFundPassword }"
                >
                  {{ t('change_password_save') }}
                </button>
              </div>
              <!-- 底部提示文字 -->
              <div class="help-text-container">
                <div class="help-text">
                  <a href="javascript:void(0)" @click="useEmailVerify">
                    <span>{{ t('change_password_no_code') }}</span>
                    <span style="color: #ffffff">{{
                      verifyMethod === 'phone'
                        ? t('change_password_use_email')
                        : t('change_password_use_phone')
                    }}</span>
                  </a>
                </div>
                <div class="help-text text-center mt-4" style="word-break: break-all">
                  {{ t('change_password_forgot_fund_pwd')
                  }}<a href="javascript:void(0)" @click="contactSupport" style="color: #24ee89">{{
                    t('change_password_contact_support')
                  }}</a>
                </div>
              </div>
            </div>

            <div v-else class="no-email-or-phone">
              <!-- 底部提示文字 -->
              <div class="no-email-or-phone-text">
                <div class="help-text" style="word-break: break-all">
                  {{ t('change_password_message') }}
                </div>
              </div>

              <div class="button-row">
                <button class="save-btn" @click="goToBind">
                  {{ t('change_password_go_contact') }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .password-page {
    height: 100vh;
    background-color: #232626;
    color: #fff;
    overflow-y: auto;
    padding: 16px;

    .page-title {
      font-size: 14px;
      font-weight: 500;
      padding: 10px 10px 15px 0;
      color: #fff;
      border-bottom: 1px solid var(--white-10010, #ffffff1a);
      margin-left: 10px;
    }

    .password-content {
      background-color: #323738;
      border-radius: 8px;
    }

    .section {
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-left: 20px;
      margin-left: 10px;

      &:last-child {
        border-bottom: none;
      }
    }

    .section-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;

      .content {
        flex: 1;

        .title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 16px;
          border-bottom: 1px solid var(--white-10010, #ffffff1a);
          padding-bottom: 14px;
        }

        .label {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 8px;
        }

        .input-row {
          margin-bottom: 16px;
        }

        .button-row {
          display: flex;
          gap: 8px;

          .save-btn {
            flex: 1;
            height: 40px;
            background: linear-gradient(90deg, #24ee89, #9fe871);
            color: #000;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;

            &.disabled {
              box-shadow: 0px -2px 0px 0px #1dca6a inset;
              box-shadow: 0px 0px 12px 0px #23ee884d;
              cursor: not-allowed;
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
  .no-email-or-phone {
    .no-email-or-phone-text {
      .help-text {
        width: 293;
        height: 76;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #b3bec1;
        line-height: 1.5;
        font-family: SF Pro;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0%;
        text-align: justify;
        vertical-align: middle;
      }
    }
    .button-row {
      display: flex;
      gap: 8px;
      .save-btn {
        flex: 1;
        height: 40px;
        background: linear-gradient(90deg, #24ee89, #9fe871);
        color: #000;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
      }
    }
  }
  .password-input-container {
    position: relative;

    :deep(.app-input-wrapper) {
      position: relative;
      overflow: visible;
    }
  }

  .eye-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 100%;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
  }

  :deep(.base-input) {
    background-color: #232626;
    border: 1px solid #3b4041;
    height: 40px;

    input {
      background-color: transparent;
      color: white;
      font-size: 14px;

      &[type='password'] {
        font-size: 22px;
        padding-right: 40px;
        /* 为眼睛图标留出空间 */
      }

      &[type='text'] {
        padding-right: 40px;
        /* 为眼睛图标留出空间 */
      }

      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
        font-size: 14px;
        letter-spacing: normal;
      }
    }
  }

  /* 验证码输入框 */
  .verify-input-container {
    display: flex;
    border: 2px solid var(---border-black-33B4041, #3b4041);
    border-radius: 6px;
    background-color: #292d2e;
    height: 42px;
    margin-bottom: 5px;
    overflow: hidden;
    padding: 4px;
  }

  .code-input {
    flex: 1;
    height: 100%;
    background-color: transparent;
    border: none;
    color: #b3bec1;
    font-size: 12px;
    text-align: left;
    padding: 0 8px;
    outline: none;

    &::placeholder {
      color: #b3bec1;
    }
  }

  .code-btn {
    min-width: 110px;
    text-align: center;
  }

  .resend-code-btn {
    height: 100%;
    border: none;
    background-color: #3a4142;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 0 12px;
    white-space: nowrap;
    border-left: 1px solid #3b4041;
    border-radius: 6px;
    cursor: pointer;

    &:disabled {
      color: rgba(255, 255, 255, 0.4);
      cursor: not-allowed;
    }
  }

  .get-code-btn {
    height: 100%;
    border: none;
    background: linear-gradient(90deg, #24ee89, #9fe871);
    color: #000;
    font-weight: 600;
    font-size: 14px;
    padding: 0 12px;
    white-space: nowrap;
    border-left: 1px solid #3b4041;
    border-radius: 6px;
    cursor: pointer;

    &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  .error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 8px;
  }

  /* 底部帮助文字 */
  .help-text-container {
    margin-top: 16px;
  }

  .help-text {
    font-size: 12px;
    color: #b3bec1;
    line-height: 1.5;
    margin-bottom: 8px;

    a {
      color: #a8aeb0;
      text-decoration: none;
    }
  }
</style>
